<template>
  <div id="main"></div>
</template>

<script>
	import * as echarts from 'echarts/core';
	import { SunburstChart } from 'echarts/charts';
	import { TitleComponent, TooltipComponent } from 'echarts/components';
	// 新的接口中不再包含 Canvas 渲染器，如果需要使用 SVG 渲染模式则使用 SVGRenderer
	import { CanvasRenderer } from 'echarts/renderers';
	echarts.use([SunburstChart, TitleComponent, TooltipComponent, CanvasRenderer]);
	import { ref,reactive,onMounted } from 'vue'
	export default{
		setup(){
			const myChart = ref("");
			const option = ref({});
			onMounted(()=>{
				initEcharts();
			})
			const initEcharts = ()=>{
				let myChart = echarts.init(document.getElementById('main'));
				option.value = {
					title:{
						text: "四季节气图",
						//subtext: '节气图',
						left: "center"
					},
					tooltip: {
						trigger: 'item',
						formatter: '{b}'
					},
					series: {
						type: 'sunburst',
						name: "四季",
						itemStyle: {color: 'hsl(-1, 0%, 100%)'},
						data: [
							{name: '春季',
								itemStyle: {color: 'hsl(25, 100%, 50%)', borderColor: 'hsl(200, 100%, 50%)', borderWidth: 2, },
								children: [
									{name: '立春\n2月3~5日', value: 2, itemStyle: {color: 'hsl(315, 100%, 50%)'},},
									{name: '雨水\n2月18~20日', value: 2, itemStyle: {color: 'hsl(330, 100%, 50%)'},},
									{name: '惊蛰\n3月5~7日', value: 2, itemStyle: {color: 'hsl(345, 100%, 50%)'},},
									{name: '春分\n3月20~21日', value: 2, itemStyle: {color: 'hsl(0, 100%, 50%)'},},
									{name: '清明\n4月4~6日', value: 2, itemStyle: {color: 'hsl(15, 100%, 50%)'},},
									{name: '谷雨\n4月19~21日', value: 2, itemStyle: {color: 'hsl(30, 100%, 50%)'},},
								]
							},{name: '夏季',
								itemStyle: {color: 'hsl(115, 100%, 50%)', borderColor: 'hsl(300, 100%, 50%)', borderWidth: 2,},
								children: [
									{name: '立夏\n5月5~7日', value: 2, itemStyle: {color: 'hsl(45, 100%, 50%)'},},
									{name: '小满\n5月20~22日', value: 2, itemStyle: {color: 'hsl(60, 100%, 50%)'},},
									{name: '芒种\n6月5~7日', value: 2, itemStyle: {color: 'hsl(75, 100%, 50%)'},},
									{name: '夏至\n6月21~22日', value: 2, itemStyle: {color: 'hsl(90, 100%, 50%)'},},
									{name: '小暑\n7月6~8日', value: 2, itemStyle: {color: 'hsl(105, 100%, 50%)'},},
									{name: '大暑\n7月22~24日', value: 2, itemStyle: {color: 'hsl(120, 100%, 50%)'},},
								]
							},{name: '秋季',
								itemStyle: {color: 'hsl(205, 100%, 50%)', borderColor: 'hsl(20, 100%, 50%)', borderWidth: 2,},
								children: [
									{name: '立秋\n8月7~9日', value: 2, itemStyle: {color: 'hsl(135, 100%, 50%)'},},
									{name: '处暑\n8月22~24日', value: 2, itemStyle: {color: 'hsl(150, 100%, 50%)'},},
									{name: '白露\n9月7~9日', value: 2, itemStyle: {color: 'hsl(165, 100%, 50%)'},},
									{name: '秋分\n9月22~24日', value: 2, itemStyle: {color: 'hsl(180, 100%, 50%)'},},
									{name: '寒露\n10月8~9日', value: 2, itemStyle: {color: 'hsl(195, 100%, 50%)'},},
									{name: '霜降\n10月23~24日', value: 2, itemStyle: {color: 'hsl(210, 100%, 50%)'},},
								]
							},{name: '冬季',
								itemStyle: {color: 'hsl(295, 100%, 50%)', borderColor: 'hsl(110, 100%, 50%)', borderWidth: 2,},
								children: [
									{name: '立冬\n11月7~8日', value: 2, itemStyle: {color: 'hsl(225, 100%, 50%)'},},
									{name: '小雪\n11月22~23日', value: 2, itemStyle: {color: 'hsl(240, 100%, 50%)'},},
									{name: '大雪\n12月6~8日', value: 2, itemStyle: {color: 'hsl(255, 100%, 50%)'},},
									{name: '冬至\n12月21~23日', value: 2, itemStyle: {color: 'hsl(270, 100%, 50%)'},},
									{name: '小寒\n1月5~7日', value: 2, itemStyle: {color: 'hsl(295, 100%, 50%)'},},
									{name: '大寒\n1月20~21日', value: 2, itemStyle: {color: 'hsl(300, 100%, 50%)'},},
								]
							},
						]
					}
				};
				myChart.setOption(option.value);
			}
		}
	}
	

</script>


